Disable Button With Javascript

[Joey]

Hello,

In my C# asp.net 2.0 application, I have a webform with a button server
control on it. The webform, like most others in the site, subscribes to
a master page. I have determined that the button always renders with an
id of "ct100_ContentPlaceHolder1_btnContinue" in both the IE and
Firefox browsers.

I created the following javascript code segment to disable it when the
page loads. I have reasons for not wanting to do this with server side
code...

document.all['ct100_ContentPlaceHolder1_btnContinue'].disabled = true;

Now, when I view this in IE, the button is disabled. But when I view it
in Firefox, it's not. Also, there are no javascript errors returned by
either browser. Also, I have already updated my browserCaps section in
web.config, if that is relevant.

Why does the button remain enabled when viewing the page with Firefox?

[Cowboy \(Gregory A. Beamer\)]

YOu need to actually query, in code behind, to determine what the postback
event is for the control and emit the JavaScript accordingly. I am not sure
this conquers all Firefox issues, but it guarantees a proper path down the
rabbit hole even if you rename the control for some reason. I do not have a
sample for this.

If you have to go absolutely generic, you can get the control that posted
from Request["EVENTTARGET"], but this does not work with all controls.

--
Gregory A. Beamer
MVP; MCP: +I, SE, SD, DBA

*************************************************
Think outside of the box!
*************************************************
"Joey" <jo*********@topscene.comwrote in message
news:11**********************@h48g2000cwc.googlegr oups.com...

Hello,

In my C# asp.net 2.0 application, I have a webform with a button server
control on it. The webform, like most others in the site, subscribes to
a master page. I have determined that the button always renders with an
id of "ct100_ContentPlaceHolder1_btnContinue" in both the IE and
Firefox browsers.

I created the following javascript code segment to disable it when the
page loads. I have reasons for not wanting to do this with server side
code...

document.all['ct100_ContentPlaceHolder1_btnContinue'].disabled = true;

Now, when I view this in IE, the button is disabled. But when I view it
in Firefox, it's not. Also, there are no javascript errors returned by
either browser. Also, I have already updated my browserCaps section in
web.config, if that is relevant.

Why does the button remain enabled when viewing the page with Firefox?

[Brennan Stehling]

Joey,

This code works for me. Be sure to declare your DTD as XHTML 1.1
Transitional. You may find that helps because the way the disabled
attribute was handled has changed since the HTML 3.2 spec.

<script type="text/javascript">
<!--
function disableButton(buttonId) {
if (document.all) {
var btn = document.all[buttonId; btn.disabled = 'true';
}
else {
var btn = document.getElementById(buttonId); btn.disabled = 'true';
}
}
// -->
</script>

....

<!-- After button is defined -->
<script type="text/javascript">
disableButton('ct100_ContentPlaceHolder1_btnContin ue');
</script>
Brennan Stehling
http://brennan.offwhite.net/blog/

Joey wrote:

Hello,

In my C# asp.net 2.0 application, I have a webform with a button server
control on it. The webform, like most others in the site, subscribes to
a master page. I have determined that the button always renders with an
id of "ct100_ContentPlaceHolder1_btnContinue" in both the IE and
Firefox browsers.

I created the following javascript code segment to disable it when the
page loads. I have reasons for not wanting to do this with server side
code...

document.all['ct100_ContentPlaceHolder1_btnContinue'].disabled = true;

Now, when I view this in IE, the button is disabled. But when I view it
in Firefox, it's not. Also, there are no javascript errors returned by
either browser. Also, I have already updated my browserCaps section in
web.config, if that is relevant.

Why does the button remain enabled when viewing the page with Firefox?

[bruce barker \(sqlwork.com\)]

document.all is an IE only collection, it does not exist in the w3c
standard, so it works in ie only. use the w3c standard:

document.getElementById('ct100_ContentPlaceHolder1 _btnContinue').disabled =
true;

-- bruce (sqlwork.com)

"Joey" <jo*********@topscene.comwrote in message
news:11**********************@h48g2000cwc.googlegr oups.com...

Hello,

In my C# asp.net 2.0 application, I have a webform with a button server
control on it. The webform, like most others in the site, subscribes to
a master page. I have determined that the button always renders with an
id of "ct100_ContentPlaceHolder1_btnContinue" in both the IE and
Firefox browsers.

I created the following javascript code segment to disable it when the
page loads. I have reasons for not wanting to do this with server side
code...

document.all['ct100_ContentPlaceHolder1_btnContinue'].disabled = true;

Now, when I view this in IE, the button is disabled. But when I view it
in Firefox, it's not. Also, there are no javascript errors returned by
either browser. Also, I have already updated my browserCaps section in
web.config, if that is relevant.

Why does the button remain enabled when viewing the page with Firefox?

[Joey]

Can you provide a simple example as to how to query, in code behind,
for the correct id?

Cowboy (Gregory A. Beamer) wrote:

YOu need to actually query, in code behind, to determine what the postback
event is for the control and emit the JavaScript accordingly. I am not sure
this conquers all Firefox issues, but it guarantees a proper path down the
rabbit hole even if you rename the control for some reason. I do not have a
sample for this.

If you have to go absolutely generic, you can get the control that posted
from Request["EVENTTARGET"], but this does not work with all controls.

--
Gregory A. Beamer
MVP; MCP: +I, SE, SD, DBA

*************************************************
Think outside of the box!
*************************************************
"Joey" <jo*********@topscene.comwrote in message
news:11**********************@h48g2000cwc.googlegr oups.com...

Hello,

In my C# asp.net 2.0 application, I have a webform with a button server
control on it. The webform, like most others in the site, subscribes to
a master page. I have determined that the button always renders with an
id of "ct100_ContentPlaceHolder1_btnContinue" in both the IE and
Firefox browsers.

I created the following javascript code segment to disable it when the
page loads. I have reasons for not wanting to do this with server side
code...

document.all['ct100_ContentPlaceHolder1_btnContinue'].disabled = true;

Now, when I view this in IE, the button is disabled. But when I view it
in Firefox, it's not. Also, there are no javascript errors returned by
either browser. Also, I have already updated my browserCaps section in
web.config, if that is relevant.

Why does the button remain enabled when viewing the page with Firefox?

[Joey]

Okay, I changed it to...

document.getElementById('ct100_ContentPlaceHolder1 _btnContinue').disabled=true

Now it still works fine in IE, and it still doesn't work in Firefox.

Any other ideas, anyone?
bruce barker (sqlwork.com) wrote:

document.all is an IE only collection, it does not exist in the w3c
standard, so it works in ie only. use the w3c standard:

document.getElementById('ct100_ContentPlaceHolder1 _btnContinue').disabled =
true;

-- bruce (sqlwork.com)

"Joey" <jo*********@topscene.comwrote in message
news:11**********************@h48g2000cwc.googlegr oups.com...

Hello,

In my C# asp.net 2.0 application, I have a webform with a button server
control on it. The webform, like most others in the site, subscribes to
a master page. I have determined that the button always renders with an
id of "ct100_ContentPlaceHolder1_btnContinue" in both the IE and
Firefox browsers.

I created the following javascript code segment to disable it when the
page loads. I have reasons for not wanting to do this with server side
code...

document.all['ct100_ContentPlaceHolder1_btnContinue'].disabled = true;

Now, when I view this in IE, the button is disabled. But when I view it
in Firefox, it's not. Also, there are no javascript errors returned by
either browser. Also, I have already updated my browserCaps section in
web.config, if that is relevant.

Why does the button remain enabled when viewing the page with Firefox?

[Joey]

Okay, nevermind. I cleared the cache in Firefox, and now it works.
Thanks a lot!
Joey wrote:

Okay, I changed it to...

document.getElementById('ct100_ContentPlaceHolder1 _btnContinue').disabled=true

Now it still works fine in IE, and it still doesn't work in Firefox.

Any other ideas, anyone?
bruce barker (sqlwork.com) wrote:

document.all is an IE only collection, it does not exist in the w3c
standard, so it works in ie only. use the w3c standard:

document.getElementById('ct100_ContentPlaceHolder1 _btnContinue').disabled =
true;

-- bruce (sqlwork.com)

"Joey" <jo*********@topscene.comwrote in message
news:11**********************@h48g2000cwc.googlegr oups.com...

Hello,
>
In my C# asp.net 2.0 application, I have a webform with a button server
control on it. The webform, like most others in the site, subscribes to
a master page. I have determined that the button always renders with an
id of "ct100_ContentPlaceHolder1_btnContinue" in both the IE and
Firefox browsers.
>
I created the following javascript code segment to disable it when the
page loads. I have reasons for not wanting to do this with server side
code...
>
document.all['ct100_ContentPlaceHolder1_btnContinue'].disabled = true;
>
Now, when I view this in IE, the button is disabled. But when I view it
in Firefox, it's not. Also, there are no javascript errors returned by
either browser. Also, I have already updated my browserCaps section in
web.config, if that is relevant.
>
Why does the button remain enabled when viewing the page with Firefox?
>

[Mark Rae]

"Joey" <jo*********@topscene.comwrote in message
news:11**********************@h48g2000cwc.googlegr oups.com...

Okay, nevermind. I cleared the cache in Firefox, and now it works.

BTW, you could make your HTML more readable by giving your MasterPage(s) and
ContentPages meaningful IDs... E.g. in the code behind your MasterPage:

protected void Page_Init(object sender, EventArgs e)
{
this.ID = "MyMasterPage";
}

And then explicitly name every ContentPage in its HTML e.g.

<asp:Content ContentPlaceHolderID="MyContentPage" runat="server">
<asp:TextBox ID="MyTextBox" runat="server" />
</<asp:Content>

Then, client side, your control will ALWAYS be called
MyMasterPage_MyContentPage_MyTextBox- this makes your life massively easier
because it means you don't have to ask ASP.NET to tell you the controls'IDs,
as you already know them.

In this way, you can use client-side JavaScript to refer to your controls in
two ways:

document.aspnetForm.MyMasterPage_MyContentPage_MyT extBox

or

document.getElementById('MyMasterPage_MyContentPag e_MyTextBox')

Also, don't forget that no matter what ID you give the <formtag in your
MasterPage, ASP.NET will ALWAYS rename it to aspnetForm :-)

[Edwin Knoppert]

Forget that , use inline aspx code to pass the control's .ClientID property.
This is the most reliable.
"Mark Rae" <ma**@markNOSPAMrae.comschreef in bericht
news:e4**************@TK2MSFTNGP04.phx.gbl...

"Joey" <jo*********@topscene.comwrote in message
news:11**********************@h48g2000cwc.googlegr oups.com...

>Okay, nevermind. I cleared the cache in Firefox, and now it works.

BTW, you could make your HTML more readable by giving your MasterPage(s)
and ContentPages meaningful IDs... E.g. in the code behind your
MasterPage:

protected void Page_Init(object sender, EventArgs e)
{
this.ID = "MyMasterPage";
}

And then explicitly name every ContentPage in its HTML e.g.

<asp:Content ContentPlaceHolderID="MyContentPage" runat="server">
<asp:TextBox ID="MyTextBox" runat="server" />
</<asp:Content>

Then, client side, your control will ALWAYS be called
MyMasterPage_MyContentPage_MyTextBox- this makes your life massively
easier because it means you don't have to ask ASP.NET to tell you the
controls'IDs, as you already know them.

In this way, you can use client-side JavaScript to refer to your controls
in two ways:

document.aspnetForm.MyMasterPage_MyContentPage_MyT extBox

or

document.getElementById('MyMasterPage_MyContentPag e_MyTextBox')

Also, don't forget that no matter what ID you give the <formtag in your
MasterPage, ASP.NET will ALWAYS rename it to aspnetForm :-)

[Brennan Stehling]

I agree. You never know what the hiearchy will be when your pages and
controls are used. Hard-coding the names in Javascript will ensure
they break sooner or later.

What I normally do is declare Javascript variables in a static .js file
with the major of the Javascript behavior. And then with the ASP.NET
controls, I insert script blocks which set those variables.

<script ...>
var buttonId;

functions...
</script>

<!-- later from the ASP.NET control -->

<script ...>
buttonId = 'Page_Button1';
</script>

Search for RegisterScriptBlock on MSDN.

Brennan Stehling
http://brennan.offwhite.net/blog/

Edwin Knoppert wrote:

Forget that , use inline aspx code to pass the control's .ClientID property.
This is the most reliable.
"Mark Rae" <ma**@markNOSPAMrae.comschreef in bericht
news:e4**************@TK2MSFTNGP04.phx.gbl...

"Joey" <jo*********@topscene.comwrote in message
news:11**********************@h48g2000cwc.googlegr oups.com...

Okay, nevermind. I cleared the cache in Firefox, and now it works.

BTW, you could make your HTML more readable by giving your MasterPage(s)
and ContentPages meaningful IDs... E.g. in the code behind your
MasterPage:

protected void Page_Init(object sender, EventArgs e)
{
this.ID = "MyMasterPage";
}

And then explicitly name every ContentPage in its HTML e.g.

<asp:Content ContentPlaceHolderID="MyContentPage" runat="server">
<asp:TextBox ID="MyTextBox" runat="server" />
</<asp:Content>

Then, client side, your control will ALWAYS be called
MyMasterPage_MyContentPage_MyTextBox- this makes your life massively
easier because it means you don't have to ask ASP.NET to tell you the
controls'IDs, as you already know them.

In this way, you can use client-side JavaScript to refer to your controls
in two ways:

document.aspnetForm.MyMasterPage_MyContentPage_MyT extBox

or

document.getElementById('MyMasterPage_MyContentPag e_MyTextBox')

Also, don't forget that no matter what ID you give the <formtag in your
MasterPage, ASP.NET will ALWAYS rename it to aspnetForm :-)

[Edwin Knoppert]

I meant:

var o = document.getElementById('<%=txt_Index.ClientID%>') ;
o.value = ....
"Brennan Stehling" <of******@gmail.comschreef in bericht
news:11**********************@m7g2000cwm.googlegro ups.com...

>I agree. You never know what the hiearchy will be when your pages and
controls are used. Hard-coding the names in Javascript will ensure
they break sooner or later.

What I normally do is declare Javascript variables in a static .js file
with the major of the Javascript behavior. And then with the ASP.NET
controls, I insert script blocks which set those variables.

<script ...>
var buttonId;

functions...
</script>

<!-- later from the ASP.NET control -->

<script ...>
buttonId = 'Page_Button1';
</script>

Search for RegisterScriptBlock on MSDN.

Brennan Stehling
http://brennan.offwhite.net/blog/

Edwin Knoppert wrote:

>Forget that , use inline aspx code to pass the control's .ClientID
property.
This is the most reliable.
"Mark Rae" <ma**@markNOSPAMrae.comschreef in bericht
news:e4**************@TK2MSFTNGP04.phx.gbl...

"Joey" <jo*********@topscene.comwrote in message
news:11**********************@h48g2000cwc.googlegr oups.com...

Okay, nevermind. I cleared the cache in Firefox, and now it works.

BTW, you could make your HTML more readable by giving your
MasterPage(s)
and ContentPages meaningful IDs... E.g. in the code behind your
MasterPage:

protected void Page_Init(object sender, EventArgs e)
{
this.ID = "MyMasterPage";
}

And then explicitly name every ContentPage in its HTML e.g.

<asp:Content ContentPlaceHolderID="MyContentPage" runat="server">
<asp:TextBox ID="MyTextBox" runat="server" />
</<asp:Content>

Then, client side, your control will ALWAYS be called
MyMasterPage_MyContentPage_MyTextBox- this makes your life massively
easier because it means you don't have to ask ASP.NET to tell you the
controls'IDs, as you already know them.

In this way, you can use client-side JavaScript to refer to your
controls
in two ways:

document.aspnetForm.MyMasterPage_MyContentPage_MyT extBox

or

document.getElementById('MyMasterPage_MyContentPag e_MyTextBox')

Also, don't forget that no matter what ID you give the <formtag in
your
MasterPage, ASP.NET will ALWAYS rename it to aspnetForm :-)

[Mark Rae]

"Edwin Knoppert" <ne**@hellobasic.comwrote in message
news:45**********************@text.nova.planet.nl. ..

var o = document.getElementById('<%=txt_Index.ClientID%>') ;
o.value = ....

Yes, I agree that is more robust...